<template>
	<div>
		<u-popup v-model="show" mode="bottom" border-radius="30" height="95%" z-index="999" :safe-area-inset-bottom="true">
      <div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="cancel"></u-icon>
        <span class="confirm" @click="confirm">确定</span>
      </div>
			<scroll-view class="content" scroll-y="true">
				<div class="toggle-row flex">
					<span class="title">人工预警</span>
					<span class="value">未开启</span>
				</div>
				<div class="toggle-row flex">
					<span class="title">公共预警</span>
					<u-switch v-model="params.warn" size="36"></u-switch>
				</div>
				<div class="checks-row" v-if="params.warn">
					<div class="title">预警级别</div>
					<u-radio-group v-model="params.warn_level" @change="checksWarn" shape="square">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in warningOptionsSubject" :key="index" 
							:name="item.value"
						>
							{{item.label}}
						</u-radio>
					</u-radio-group>
				</div>
				<div class="line"></div>
				<div class="toggle-row flex">
					<span class="title">自定义预警</span>
					<u-switch v-model="params.custom" size="36"></u-switch>
				</div>
				<div v-if="params.custom">
					<div class="checks-row">
						<div class="title">预警文章类型</div>
						<u-checkbox v-model="mediaTypeAll_warn" @change="checksWarnMediaTypeAll"  :name="0">全部</u-checkbox>
						<u-checkbox-group @change="checksWarnMediaType">
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in warn_mediaOptions" :key="index" 
								:name="item.value"
							>{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</div>
					<div class="checks-row">
						<div class="title">预警文章类型</div>
						<u-checkbox v-model="filter_type_all_warn" @change="checksWarnArticleTypeAll"  :name="0">全部</u-checkbox>
						<u-checkbox-group @change="checksWarnArticleType">
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in warn_articleTypeOptions" :key="index" 
								:name="item.value"
							>{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</div>
					<div class="checks-row">
						<div class="title">倾向性</div>
						<u-checkbox v-model="sentiment_all_warn" @change="checksWarnTendAll" :name="0">全部</u-checkbox>
						<u-checkbox-group @change="checksWarnTend">
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in warn_tendOptions" :key="index" 
								:name="item.value"
							>{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</div>
					<div class="checks-row">
						<div class="title">噪音过滤</div>
						<u-checkbox v-model="sentiment_all_warn" @change="checksWarnTendAll" :name="0">全部</u-checkbox>
						<u-checkbox-group @change="checksWarnTend">
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in noiseOptions" :key="index" 
								:name="item.value"
							>{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</div>
					<div class="block block-2">
						<div class="title">预警词</div>
						<div class="box" @click="toInputPage('预警词')">
							<div class="tags" v-if="params.custom_words.length>0">
								<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.custom_words" :key="index" />
							</div>
							<div class="tip" v-else>请输入</div>
						</div>
					</div>
					<div class="block block-2">
						<div class="title">排除词</div>
						<div class="box" @click="toInputPage('预警排除词')">
							<div class="tags" v-if="params.custom_exclude.length>0">
								<u-tag class="tag" :text="item" mode="plain" v-for="(item, index) in params.custom_exclude" :key="index" />
							</div>
							<div class="tip" v-else>请输入</div>
						</div>
					</div>
				</div>
				<div class="line"></div>
				<div class="toggle-row flex">
					<span class="title">异常预警<span class="subtitle">设置完成次日生效</span></span>
					<u-switch v-model="params.abnormal_warn" size="36"></u-switch>
				</div>
				<div v-if="params.abnormal_warn">
					<div class="checks-row">
						<div class="title">倾向性</div>
						<u-checkbox v-model="sentiment_all_warn2" @change="checksWarnTendAll2" :name="0">全部</u-checkbox>
						<u-checkbox-group @change="checksWarnTend2">
							<u-checkbox 
								v-model="item.checked" 
								v-for="(item, index) in warn_tendOptions2" :key="index" 
								:name="item.value"
							>{{item.label}}</u-checkbox>
						</u-checkbox-group>
					</div>
					<div class="row">
						<div class="title">预警阈值</div>
						<div class="row-text flex">一个小时内超过前七天相应时段平均数量
							<u-input v-model="params.abnormal_threshold" type="number" placeholder="" :clearable="false" :border="true" style="padding: 0 5rpx;margin: 0 5rpx;" />
							%时预警</div>
					</div>
				</div>
				<div class="line"></div>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { subjectDetail, editSubject } from "@/api/subject.js";

export default {
	props: {
		id: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			kwType: "",
			params: {
				pid: "",
				title: "",  //专题名称

				warn: true,  //榜单预警是否开启
				warn_level: 1,  //榜单预警级别
				custom: false,  //自定义预警是否开启
				custom_media: [0],  //自定义预警媒体类型
				custom_type: [0],  //发布类型
				custom_noise: 0,  //噪音过滤
				custom_sentiment: [2],  //自定义倾向性
				custom_words: [],  //自定义预警词
				custom_exclude: [],  //自定义排除词
				abnormal_warn: false,  //异常预警是否开启
				abnormal_sentiment: [1],  //异常倾向性
				abnormal_threshold: 30,  //预警阈值 %
			},
			warningOptionsSubject: [
				{ label: "宽松", value: 2, checked:false },
				{ label: "标准", value: 1, checked:false },
				{ label: "严格", value: 3, checked:false },
			],
			warn_tendOptions: [
				{ label: "正面", value: 1, checked:false },
				{ label: "负面", value: 3, checked:true },
				{ label: "中性", value: 2, checked:false },
			],
			warn_articleTypeOptions: [
				{ label: "原创", value: 1, checked:false },
				{ label: "转发", value: 2, checked:false },
				{ label: "评论", value: 7, checked:false },
				{ label: "弹幕", value: 8, checked:false },
			],
			mediaOptions: [
				{ label: "新闻", value: "01", checked:false },
				{ label: "平媒", value: "0105", checked:false },
				{ label: "论坛", value: "02", checked:false },
				{ label: "博客", value: "03", checked:false },
				{ label: "微博", value: "04", checked:false },
				{ label: "新浪微博", value: "0401", checked:false },
				{ label: "微信", value: "06", checked:false },
				{ label: "视频", value: "07", checked:false },
				{ label: "长微博", value: "08", checked:false },
				{ label: "APP", value: "0109", checked:false },
				{ label: "短视频", value: "11", checked:false },
			],
			warn_mediaOptions: [
				{ label: "新闻", value: "01", checked:false },
				{ label: "平媒", value: "0105", checked:false },
				{ label: "论坛", value: "02", checked:false },
				{ label: "博客", value: "03", checked:false },
				{ label: "微博", value: "04", checked:false },
				{ label: "新浪微博", value: "0401", checked:false },
				{ label: "微信", value: "06", checked:false },
				{ label: "视频", value: "07", checked:false },
				{ label: "长微博", value: "08", checked:false },
				{ label: "APP", value: "0109", checked:false },
				{ label: "短视频", value: "11", checked:false },
			],
			mediaTypeAll: false,
			noiseOptions: [
				{ label: "正常", value: 1, checked:false },	
				{ label: "过滤", value: 3, checked:true },
			],
			sentiment_all_warn: false,
			filter_type_all_warn: false,
			mediaTypeAll_warn: false,
			warn_tendOptions2: [
				{ label: "正面", value: 1, checked:true },
				{ label: "负面", value: 3, checked:false },
				{ label: "中性", value: 2, checked:false },
			],
			sentiment_all_warn2: false,
		}
	},
	computed: {
		show: {
			get() {
				return this.$store.state.isSubjectWarn;
			},
			set(value) {
				this.$store.state.isSubjectWarn = value;
			}
		},
	},
	watch: {
		id() {
			subjectDetail({id: this.id}).then(({data})=>{
				let tmp = {...data};
				Object.keys(tmp).map(key=>{
					if(tmp[key] === "t"){
						tmp[key] = true;
					}else if(tmp[key] === "f"){
						tmp[key] = false;
					}
				});
				this.params = tmp
			});
		},
	},
	methods: {
		cancel() {
			this.$store.state.isSubjectWarn = false;
		},
		checksWarnMediaTypeAll(val) {
			if(val.value){
				this.warn_mediaOptions.map(item=>{
					item.checked = false;
				});
			}
			this.params.custom_media = [0];
		},
		checksWarnMediaType(val) {
			if(val.length == 11){
				this.mediaTypeAll_warn = true;
				this.warn_mediaOptions.map(item=>{
					item.checked = false;
				});
				this.params.custom_media = [0];
			}else{
				this.mediaTypeAll_warn = false;
				this.params.custom_media = val;
			}
		},
		checksWarnTendAll(val) {
			if(val.value){
				this.warn_tendOptions.map(item=>{
					item.checked = false;
				});
			}
			this.params.custom_sentiment = [0];
		},
		checksWarnTend(val) {
			if(val.length == 3){
				this.sentiment_all_warn = true;
				this.warn_tendOptions.map(item=>{
					item.checked = false;
				});
				this.params.custom_sentiment = [0];
			}else{
				this.sentiment_all_warn = false;
				this.params.custom_sentiment = val;
			}
		},
		checksWarnArticleTypeAll(val) {
			if(val.value){
				this.warn_articleTypeOptions.map(item=>{
					item.checked = false;
				});
			}
			this.params.custom_type = [0];
		},
		checksWarnArticleType(val) {
			if(val.length == 4){
				this.filter_type_all_warn = true;
				this.warn_articleTypeOptions.map(item=>{
					item.checked = false;
				});
				this.params.custom_type = [0];
			}else{
				this.filter_type_all_warn = false;
				this.params.custom_type = val;
			}
		},
		checksWarnTendAll2(val) {
			if(val.value){
				this.warn_tendOptions2.map(item=>{
					item.checked = false;
				});
			}
			this.params.abnormal_sentiment = [0];
		},
		checksWarnTend2(val) {
			if(val.length == 3){
				this.sentiment_all_warn2 = true;
				this.warn_tendOptions2.map(item=>{
					item.checked = false;
				});
				this.params.abnormal_sentiment = [0];
			}else{
				this.sentiment_all_warn2 = false;
				this.params.abnormal_sentiment = val;
			}
		},
		toInputPage(type) {
			this.$parent.toInputPage(type);
		},

		confirm() {
			uni.showLoading({title: "保存中"});
			let tmp = {...this.params};
			Object.keys(tmp).map(key=>{
				if(tmp[key] === true){
					tmp[key] = "t";
				}else if(tmp[key] === false){
					tmp[key] = "f";
				}
			});
			editSubject(tmp).then(({code})=>{
				uni.hideLoading();
				if(code == 200){
					this.$parent.getSubjects();
					this.cancel();
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.top{
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
  justify-content: space-between;
  align-items: center;
  .icon{
    cursor: pointer;
  }
  .confirm{
    cursor: pointer;
    font-size: 32rpx;
    color: #1E62FC;
  }
}
.content{
	background-color: #fff;
	height: calc(100% - 80rpx);
}
.line{
	height: 20rpx;
	background-color: #F2F3F7;
}
.row{
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	font-size: 32rpx;
	.title{
		padding: 20rpx 0;
	}
	.box{
		margin-left: 0;
		margin-right: 0;
	}
	.row-text{
		font-size: 30rpx;
		align-items: center;
	}
}
.checks-row{
	align-items: center;
	border-top: 1px solid #F2F3F7;
	padding: 20rpx;
	.title{
		margin-right: 40rpx;
		font-size: 32rpx;
		line-height: 1;
		margin-bottom: 10rpx;
	}
}
.toggle-row{
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	.title{
		font-size: 30rpx;
	}
	.subtitle{
		font-size: 22rpx;
		margin-left: 10rpx;
		color: #1E62FC;
	}
	.value{
		font-size: 28rpx;
		color: #1E62FC;
	}
}
.block{
	border-top: 1px solid #ccc;
	&:first-child{
		border: none;
	}
	.box{
		margin: 10rpx 20rpx 30rpx;
		font-size: 30rpx;
		overflow-x: auto;
	}
	.title{
		font-size: 32rpx;
		line-height: 32rpx;
		padding: 30rpx 20rpx;
	}
}
</style>